<template>
  <div id="basicLayout">
  <a-layout>
        <a-layout-header class="header">
          <GlobalHeader />
        </a-layout-header>
      <a-layout-content >
        <router-view />
      </a-layout-content>
      <a-layout-footer class="footer">
        <a href="https://www.liangstar.com" target="_blank"> 编程导航 by 理想怎么梁 </a>
      </a-layout-footer>
  </a-layout>
  </div>
</template>


<style scoped>
#basicLayout .header {
  padding-inline: 20px;
  margin-bottom: 16px;
  color: unset;
  background: white;
}
#basicLayout .footer { background: #efefef; padding: 16px; position: fixed; bottom: 0; left: 0;
  right: 0; text-align: center; }
</style>
<script setup lang="ts">
import GlobalHeader from '@/components/GlobalHeader.vue'
import type { CSSProperties } from 'vue'

const headerStyle: CSSProperties = {
  textAlign: 'center',
  color: '#fff',
  height: 64,
  paddingInline: 50,
  lineHeight: '64px',
  backgroundColor: '#7dbcea',
}

const contentStyle: CSSProperties = {
  textAlign: 'center',
  minHeight: 120,
  lineHeight: '120px',
  color: '#fff',
  backgroundColor: '#108ee9',
}

const siderStyle: CSSProperties = {
  textAlign: 'center',
  lineHeight: '120px',
  color: '#fff',
  backgroundColor: '#3ba0e9',
}

const footerStyle: CSSProperties = {
  textAlign: 'center',
  color: '#fff',
  backgroundColor: '#7dbcea',
}
</script>
